<template>
  <aside>
    <!-- 搜索部分 -->
    <div class="search_box">
      <el-input
        v-model="keyword"
        :placeholder="$t('输入商品代码')"
        @input="search"
        clearable
      >
        <template #suffix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </div>
    <!-- 分类 -->
    <div class="sort">
      <div class="sort_item" v-for="(item, index) in sortList" :key="item.id">
        <div
          class="item_inner"
          :class="current == index ? 'active_inner' : ''"
          @click="changeSort(index)"
        >
          <div class="text">{{ item.name }}</div>
          <div class="inner_bottom"></div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list_title">
        <div class="title">{{ $t("商品代码") }}</div>
        <div class="title right">{{ $t("卖价") }}</div>
        <div class="title right">{{ $t("买价") }}</div>
      </div>
      <div class="list_box scroll_box">
        <!-- @scroll="scrollList" -->
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="changeChoose(item)"
        >
          <div class="item_inner">
            <el-icon
              :color="item.is_collect == '1' ? '#e3c79b' : '#fff'"
              class="name_icon"
              @click.stop="collect(index)"
            >
              <StarFilled />
            </el-icon>
            <span class="name">{{ item.name }}</span>
          </div>
          <div class="item_inner right">{{ item.sell_price }}</div>
          <!-- :class="1==1?'up':'down'" -->
          <div class="item_inner right">{{ item.buy_price }}</div>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
import { ElNotification } from "element-plus";
import { listApi, addCollectApi } from "@/api/index";
export default {
  data() {
    return {
      keyword: "",
      current: 0,
      page: 1,
      list: [],
      total: -1,
      timer: null,
    };
  },
  computed: {
    sortList() {
      let list = [
        { name: this.$t("交易品种"), id: 0 },
        { name: this.$t("我的收藏"), id: 100 },
        // { name: "搜索结果", id: 3 },
      ];
      if (this.keyword != "") {
        list = [{ name: this.$t("搜索结果"), id: 0 }];
      } else {
        list = [
          { name: this.$t("交易品种"), id: 0 },
          { name: this.$t("我的收藏"), id: 100 },
        ];
      }

      return list;
    },
  },
  mounted: async function () {
    await this.getList();
    this.timer = setInterval(() => {
      // console.log("定时刷新列表");
      this.getList();
    }, 20000);
    this.$nextTick(() => {
      this.changeChoose(this.list[0]);
    });
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    search() {
      console.log(this.keyword);
    },
    changeSort(index) {
      console.log(index);
      if (this.current == index) return;
      this.current = index;
      this.page = 1;
      this.total = -1;
      this.list = [];
      clearInterval(this.timer);
      this.getList();
      this.timer = setInterval(() => {
        this.getList();
      }, 20000);
    },
    async getList() {
      // if (this.total == this.list.length) {
      //   this.page--;
      //   return;
      // }
      await listApi({
        // page: this.page,
        token: localStorage.getItem("token"),
        keyword: this.keyword,
        cate_id: this.sortList[this.current].id,
      }).then((res) => {
        console.log(res.data);
        this.total = res.data.total;
        // if (this.page == 1) {
        this.list = res.data.data;
        // } else {
        //   this.list = this.list.concat(res.data.data);
        // }
      });
    },
    // scrollList(e) {
    //   // 获取需要滚动的 div 元素
    //   var divElement = document.querySelector(".list_box"); // 替换 'yourDivElementId' 为实际的元素 ID
    //   if (divElement.scrollHeight - divElement.scrollTop === divElement.clientHeight) {
    //     console.log("已经滚动到底部");
    //     // 在这里执行你需要的操作
    //     this.page++;
    //     this.getList();
    //   }
    // },
    changeChoose(opt) {
      this.$emit("changeChoose", opt);
    },
    collect(index) {
      addCollectApi({
        token: localStorage.getItem("token"),
        id: this.list[index].id,
      }).then((res) => {
        if (res.code == 1) {
          ElNotification({
            message: res.msg,
            type: "success",
          });
          if (this.list[index].is_collect == 1) {
            this.list[index].is_collect = 0;
          } else {
            this.list[index].is_collect = 1;
          }
        } else {
          ElNotification({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  watch: {
    keyword(newVal) {
      this.page = 1;
      this.total = -1;
      this.getList();

      if (this.current == 0) return;
      this.current = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
aside {
  width: 300px;
  height: 100%;
  background: #282b37;
  display: flex;
  flex-direction: column;
  .search_box {
    position: relative;
    z-index: 99;
    margin: 20px 20px;
    border-radius: 50px;
    background-color: #22252f;
    padding: 0px 12px;
    div {
      border-color: transparent !important;
    }
  }
  .el-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    ::v-deep .el-input__wrapper {
      background: transparent;
      padding: 0;
      border: none;
      box-shadow: none;
      .el-input__inner {
        color: #fff;
      }
    }
  }
  .sort {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #22252f;
    .item_inner {
      margin: 0 10px;
      cursor: pointer;
      .text {
        color: #fff;
        font-size: 15px;
        padding: 0 0 14px 0;
      }
      .inner_bottom {
        height: 3px;
        background-color: transparent;
        border-radius: 5px;
        transform: translateY(1px);
      }
      &.active_inner {
        .text {
          color: #f7d8a7;
        }
        .inner_bottom {
          background-color: #f7d8a7;
        }
      }
    }
  }
  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .list_title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #22252f;
      height: 40px;
      color: #838795;
      padding: 0 10px;
      cursor: default;
      .title {
        flex: 1;
        flex-shrink: 0;
        padding: 0 5px 0 12px;
      }
    }
    .list_box {
      flex: 1;
      overflow: auto;
      .item {
        border-bottom: 1px solid #22252f;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        .item_inner {
          flex: 1;
          flex-shrink: 0;
          padding: 0 5px 0 0;
          display: flex;
          align-items: center;
          cursor: default;
          .name_icon {
            font-size: 16px;
            cursor: pointer;
          }
          .name {
            margin-left: 0.25rem;
          }
        }
      }
    }
  }
}
.right {
  text-align: end;
  padding: 0 5px;
  justify-content: flex-end;
}
</style>
